<template>
  <div>
    <div class="img_top">
      <img width="100%" src="../../static/img/blank.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">发表博客</div>
      </div>
      <P class="about_p">青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</P>
    </div>
    <div class="about_end">
      <div class="blog_tit">
        <el-select class="blog_select" v-model="value" placeholder="类型">
          <el-option
            v-for="item in options"
            @click.native="findSortUid(item.uid)"
            :key="item.uid"
            :label="item.sortName"
            :value="item.uid"
          ></el-option>
        </el-select>
        <el-input class="blog_tit_inp" placeholder="标题" v-model="input" clearable></el-input>
        <el-input
          class="blog_inp"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 50}"
          placeholder="请输入内容"
          v-model="textarea2"
        ></el-input>
        <el-select class="blog_tag" v-model="value1"  placeholder="标签">
          <el-option v-for="item in tag"
                     @click.native="findTagUid(item.uid)"
                     :key="item.uid"
                     :label="item.content"
                     :value="item.uid"
          ></el-option>
        </el-select>
        <el-input class="shoutu" placeholder="请输入内容" v-model="input1">
          <template slot="prepend" v-model="input2">首图地址：</template>
        </el-input>
        <el-button type="success" class="blog_sub" @click="fabu">发布</el-button>
        <el-button type="warning" class="blog_sub" @click="baocun">保存</el-button>
        <el-button type="info" class="blog_sub" style="margin-right:10px">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import Cookies from "js-cookie";
export default {
  data() {
    return {
      input1: "",
      value1: [],
      value2: [],
      input: "",
      textarea1: "",
      textarea2: "",
      options: [],
      tag: [],
      input2: "",
      taguid: "",
      value: "",
      blogSortUid:""
    };
  },
  methods:{
    findTagUid:function (x) {
      this.taguid = x;
    },
    findSortUid:function (s) {
      this.blogSortUid = s;
    },

    findAllSort(){
      var _this=this;
      axios.get("/api/sort/listSort").then(function (res) {
          _this.options=res.data;
      })
    },
      findAllTag(){
      var _this = this;
      axios.get("/api/blogs/getHotTag").then(function (res) {
          _this.tag=res.data;

      })
      },
    fabu(){
      var _this = this;
      var username = Cookies.get("username");
      axios.post("/api/fabu/fabu",{author:username,blogSortUid:_this.blogSortUid,
        title:_this.input,
        content:_this.textarea2,
        tagUid:_this.taguid,fileUid:_this.input1}).then(function (res) {

          if (res.data=="发布成功"){
            alert("发布成功")
            _this.$router.push('/');
          }
      })
    },
    baocun(){
      var _this = this;
      var username = Cookies.get("username");
      axios.post("/api/fabu/baocun",{author:username,blogSortUid:_this.value,
        title:_this.input,
        content:_this.textarea2,
        tagUid:_this.value1,fileUid:_this.input1}).then(function (res) {

        if (res.data=="success"){
          alert("保存成功")
        }else {
          alert("请登录")
        }
      })
    },
      zhanshi(name){
      var _this=this;
          axios.get('/api/fabu/zhanshi/'+name).then(function (res) {
                if (res.data!=null){
                  _this.input1=res.data.fileUid;

                  _this.value=res.data.blogSortUid;
                  _this.input=res.data.title;
                  _this.textarea2=res.data.content;
                  _this.value1=res.data.tagUid;
                }else {
                  alert("请先登录")
                  _this.$router.push('/login');
                }

          })
      }
  },
  mounted() {
    var username = Cookies.get("username");
    this.findAllSort();
    this.findAllTag();
    this.zhanshi(username);

  }
};
</script>

<style>
.about {
  width: 80%;
  height: 60px;
  margin-left: 10%;
  background-color: #f6f6f6;
  border-bottom: 1px #000 solid;
}
.about_end {
  width: 80%;
  margin-left: 10%;
  height: 1000px;
  background-color: #f6f6f6;
  padding-top: 50px;
}
.about_btn {
  position: absolute;
  left: 160px;
  top: 310px;
}
.about_p {
  float: right;
  margin-right: 30px;
  line-height: 40px;
}
.about_mess1 {
  width: 100px;
  height: 40px;
  background-color: #000000;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.about_mess2 {
  width: 100px;
  height: 40px;
  background-color: #3a6ab5;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.blog_tit {
  height: 40px;
  width: 80%;
  margin-left: 100px;
}
.blog_select {
  float: left;
}
.blog_tit_inp {
  width: 740px;
  float: left;
}
.blog_inp {
  margin-top: 10px;
}
.blog_tag {
  float: left;
  margin-top: 10px;
  width: 330px;
}
.shoutu {
  margin-top: 10px;
}
.blog_sub{
    margin-top: 15px;
    float: right;
    margin-left: 20px;
}
</style>
